<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" charset="UTF-8" src="../../js/Vue.js-v2.6.10.js"></script>
	</head>
	<body>
		
		<div id="vue-app">
			<h4 v-text="title"></h4>
			<h5 v-text="'当前日期'+getDate"></h5>
			<button type="button" @click="btnClick" v-text="btnText"></button>
		</div>
		
		<script type="text/javascript">
			/* 配置是否允许 vue-devtools 检查代码。
			开发版本默认为 true，生产版本默认为 false。
			生产版本设为 true 可以启用检查。 */
			
			/* vue-devtools 是  */
			
			// Vue.config.devtools = true;  
			// Vue.config.devtools = false;  //设置为false后 chrome 开发者模式的vue拓展程序就无法使用了
			
			var vm = new Vue({
				el: "#vue-app",
				data: {
					title: "vue-devtools 测试页",
					count: 0,
					btnText: "按钮",
					// date: null,
					time: null,
					year: null,
					month: null
				},
				created: function (){
					this.date = new Date();
					this.year = this.date.getFullYear();
					this.month = this.date.getMonth();
				},
				methods: {
					btnClick: function(){
						this.count++;
						this.btnText = "按钮点击了"+ this.count +"次";
					}
				},
				computed: {
					getDate: function(){
						return this.year+"/"+this.month;
					}
				},
			})
		</script>
	</body>
</html>